<template>
  <div class="content">
    <van-nav-bar title="上报" left-arrow @click-left="onClickLeft" />
    <div class="inner-content">
      <div
        class="item-content"
        v-for="(it, i) in eventTypeList"
        :key="`item_${i}`"
      >
        <div class="item-title">
          {{ it.upperName }}
        </div>
        <div class="item-children">
          <div
            class="item-name"
            v-for="(it2, i2) in it.typeInfo"
            :key="`item_name_${i2}`"
          >
            <van-button @click="handleShowPicker(it2)">{{
              it2.typeName
            }}</van-button>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="eventLevelList"
        title="选择事件程度"
        value-key="eventLevelName"
        @confirm="handlePickerConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  getReportEventTypeList,
  getReportEventLevelList,
  getEventTypeList,
} from "@/api/report";
export default {
  data() {
    return {
      eventLevelName: "",
      showModal: false,
      showPicker: false,
      data: {},
      eventTypeDict: [],
      eventTypeList: [],
      eventLevelList: [],
    };
  },
  activated() {
    this.showPicker = false;
    this.getReportEventTypeList();
    this.getEventTypeList();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //获取事件类型字典
    getEventTypeList() {
      this.$toast("加载中...");
      const params = {
        dictType: "event_level",
      };
      getEventTypeList(params).then((res) => {
        this.eventTypeDict = res.rows;
      });
    },
    //获取上报事件类型
    getReportEventTypeList() {
      this.$toast("加载中...");
      getReportEventTypeList().then((res) => {
        this.eventTypeList = res.data;
      });
    },
    //获取事件程度
    getReportEventLevelList(eventName) {
      this.$toast("加载中...");
      const params = {
        pageNum: 1,
        pageSize: 999,
        eventName,
      };
      getReportEventLevelList(params).then((res) => {
        let temp = res.rows;
        temp.map((item) => {
          this.eventTypeDict.map((item2) => {
            if (item.eventLevel === item2.dictValue) {
              item.eventLevelName = item2.dictLabel;
            }
          });
        });
        this.eventLevelList = temp;
        this.showPicker = true;
      });
    },
    handleShowPicker(data) {
      this.getReportEventLevelList(data.typeName);
    },
    handlePickerConfirm(value) {
      this.showPicker = false;
      const data = {
        id: value.id,
        formId: value.eventFormId,
        versionId: value.eventFormVersionsId,
        reportWflowId: value.reportWflowId,
        typeId: value.typeId,
        eventLevel: value.eventLevel,
      };
      this.$store.commit("SET_REPORT_DATA", data);
      this.$router.push({
        path: "/report/add",
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .van-nav-bar .van-icon {
  color: #bbb;
}
.content {
  padding-bottom: 48px;

  .inner-content {
    padding: 12px;
    color: #101010;
    margin: 12px;
    border-radius: 8px;

    .item-content {
      .item-title {
        color: #2979ff;
        font-size: 16px;
        margin-bottom: 12px;
      }

      .item-children {
        display: flex;
        flex-wrap: wrap;

        .item-name {
          margin-right: 12px;
          margin-bottom: 12px;
        }
      }
    }
  }
}
</style>
